// 该文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from 'vue-router'
// 引入组件
import About from "../pages/About"
import Home from "../pages/Home"
import News from "../pages/News"
import Message from "../pages/Message"
import Details from "../pages/Details"

// 创建一个路由器
const router = new VueRouter({
  // mode: "hash",     // 此模式下“#”后面的字符都不会传到服务器上  不需要请求服务器资源
  mode: "history",     // 此模式下 刷新页面会请求服务器一个长的url, 服务器不一定支持
  routes: [
    { 
      name: "guanyu",
      path:'/about',
      component: About,
      peiqi: true,          // 此行无效 无法挂载属性
      meta: {               // 路由元 这个属性存放用户自己配置的属性
        isAuth: false,
        title: "关于"
      }
    },
    {
      name: "zhuye",
      path:'/home',
      component: Home,
      meta: {
        isAuth: false,
        title: "主页"
      },
      children: [           // 通过children配置子级路由
        {
          name: "xinwen",
          path: 'news',     // 此处一定不要写， /news
          component: News,
          meta: {           // 路由元 这个属性存放用户自己配置的属性
            isAuth: true,
            title: "新闻"
          },
          // 独享守卫
          /* beforeEnter(to, from, next) {
            if(localStorage.getItem("school") === "aiguigu") {  // 权限控制的具体规则
              document.title = to.meta.title || "硅谷系统"
              next()  // 放行
            } else {
              alert("学校名不对，无权限查看")
            }
          } */
        },
        {
          name: "xiaoxi",
          path: 'message',  // 此处一定不要写， /message
          component: Message,
          meta: {           // 路由元 这个属性存放用户自己配置的属性
            isAuth: true,
            title: "消息"
          },
          children: [
            {
              name: "xiangqing",  // 给路由命名
              // path: "details/:id/:title",
              path: "details",
              component: Details,
              meta: {           // 路由元 这个属性存放用户自己配置的属性
                isAuth: true,
                title: "详情"
              },
              // 纯静态数据
              // props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件。
              // props: {a:1, b:'hello'}

              // props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件。
              // props: true

              // props的第三种写法，值为函数。
              /* props($route) {
                return {id:$route.query.id, title:$route.query.title}
              } */
              /* props({query}) {
                return {id:query.id, title:query.title}
              } */
              props({query: {id, title}}) {
                return {id:id, title:title}
              }
            }
          ]
        }
      ]
    }
  ]
})

// 全局前置路由守卫————初始化的时候被调用、每次路由切换之前被调用
/* router.beforeEach((to, from, next) => {
  console.log(to, from)
  // if(to.path === "/home/news" || to.path === "/home/message") {
  if(to.name === "xinwen" || to.name === "xiaoxi") {  
    if(localStorage.getItem("school") === "aiguigu") {
      next()
    } else {
      alert("学校名不对，无权限查看")
    }
  } else {
    next()
  }
}) */

/* router.beforeEach((to, from, next) => {
  console.log("前置路由守卫", to, from)
  if(to.meta.isAuth) {      // 判断当前路由是否需要进行权限控制
    if(localStorage.getItem("school") === "aiguigu") {  // 权限控制的具体规则
      document.title = to.meta.title || "硅谷系统"
      next()  // 放行
    } else {
      alert("学校名不对，无权限查看")
    }
  } else {
    document.title = to.meta.title || "硅谷系统"
    next()    // 放行
  }
}) */

// 全局后置路由守卫————初始化的时候被调用、每次路由切换之后被调用
router.afterEach((to, from) => {
  console.log("后置路由守卫", to, from)
  document.title = to.meta.title || "硅谷系统"
})

export default router